<template>
    <div>
        <vxe-table ref="topTableRef" :data="currentPageData" border style="width: 100%">
            <vxe-table-column :title="$t('stm.branchTransReport.seq')" width="80">
                <template #default="{ row, rowIndex }">
                    {{ rowIndex + 1 + computeSn}}
                </template>
            </vxe-table-column>
            <vxe-table-column :title="$t('stm.branchTransReport.orgName')">
                <template #default="{ row, rowIndex }">
                    <div>{{ row.rptOrgName }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column :title="$t('stm.monitorLedger.TMSystem')">
                <template #default="{ row, rowIndex }">
                    <bfe-input v-if="type !== 'view'" v-model="row.monSys" size="small" type="input" :maxlength="100"
                        :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
                    <div v-else>{{ row.monSys }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column :title="$t('stm.monitorLedger.scenarioNo')">
                <template #default="{ row, rowIndex }">
                    <bfe-input v-if="type !== 'view'" v-model="row.modlRefno" size="small" type="input" :maxlength="50"
                        :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
                    <div v-else>{{ row.modlRefno }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column :title="$t('stm.monitorLedger.senarioName')">
                <template #default="{ row, rowIndex }">
                    <bfe-input v-if="type !== 'view'" v-model="row.modlName" size="small" type="input" :maxlength="200"
                        :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
                    <div v-else>{{ row.modlName }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column :title="$t('stm.monitorLedger.ruleLogic')">
                <template #default="{ row, rowIndex }">
                    <bfe-input v-if="type !== 'view'" v-model="row.monDes" size="small" type="input" :maxlength="1000"
                        :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
                    <div v-else>{{ row.monDes }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column :title="$t('stm.monitorLedger.frequencyPer')">
                <template #default="{ row, rowIndex }">
                    <bfe-input v-if="type !== 'view'" v-model="row.oprtFreq" size="small" type="input" :maxlength="50"
                        :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
                    <div v-else>{{ row.oprtFreq }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column :title="$t('stm.monitorLedger.lookbackPer')">
                <template #default="{ row, rowIndex }">
                    <bfe-input v-if="type !== 'view'" v-model="row.rvCycle" size="small" type="input" :maxlength="50"
                        :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
                    <div v-else>{{ row.rvCycle }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column :title="$t('stm.monitorLedger.status')">
                <template #default="{ row, rowIndex }">
                    <bfe-input v-if="type !== 'view'" v-model="row.oprtSts" size="small" type="input" :maxlength="50"
                        :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
                    <div v-else>{{ row.oprtSts }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column :title="$t('stm.monitorLedger.lastReview')">
                <template #default="{ row, rowIndex }">
                    <bfe-date-picker v-if="type !== 'view'" v-model="row.lstmHiDt" size="small" type="date"
                        style="width: 110px;" format
                        :placeholder="$t('stm.monitorLedger.pleaseInputDate')"></bfe-date-picker>
                    <div v-else>{{ row.lstmHiDt }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column :title="$t('stm.monitorLedger.conclusionLast')">
                <template #default="{ row, rowIndex }">
                    <bfe-input v-if="type !== 'view'" v-model="row.lstmHiCncln" size="small" type="input"
                        :maxlength="10000" :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
                    <div v-else>{{ row.lstmHiCncln }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column :title="$t('stm.monitorLedger.dateLastChange')">
                <template #default="{ row, rowIndex }">
                    <bfe-date-picker v-if="type !== 'view'" v-model="row.lstmMdfDt" size="small" type="date"
                        style="width: 110px;" format
                        :placeholder="$t('stm.monitorLedger.pleaseInputDate')"></bfe-date-picker>
                    <div v-else>{{ row.lstmMdfDt }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column :title="$t('stm.monitorLedger.lastChange')">
                <template #default="{ row, rowIndex }">
                    <bfe-input v-if="type !== 'view'" v-model="row.lstmMdfTp" size="small" type="input" :maxlength="50"
                        :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
                    <div v-else>{{ row.lstmMdfTp }}</div>
                </template>
            </vxe-table-column>
            <vxe-table-column :title="$t('stm.monitorLedger.operate')" width="120" v-if="type !== 'view'">
                <template #default="{ row, rowIndex }">
                    <bfe-button type="text" @click="delList(row)" v-if="list && list.length > 1">{{$t('stm.common.deleteText')}}</bfe-button>
                    <bfe-button type="text" @click="addList" v-if="rowIndex === currentPageData.length - 1">{{$t('stm.common.add')}}</bfe-button>
                </template>
            </vxe-table-column>
        </vxe-table>
        <vxe-pager border :current-page="tablePage.pageNo" :page-size="tablePage.pageSize" :total="tablePage.total"
            :page-sizes="[5, 10, 20, 40]" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
            @page-change="handlePageChange"
            :lang="currentLanguage">
        </vxe-pager>

    </div>
</template>

<script>
import { mapState } from 'vuex';



export default {
    props: {
        type: {
            type: String,
            default: ''
        },
        date: {
            type: String,
            default: ''
        },
        selectObj: {
            type: Object,
            default: () => { }
        },
        reqOrgNo: {
            type: String,
            default: null,
        },
    },
    data() {
        return {
            list: [],
            globalId: 1, //全局id，唯一标识
            // 分页
            tablePage: {
                pageNo: 1,
                pageSize: 5,
                total: 0,
            },
        }
    },
    computed: {
        ...mapState({
            language: (state) => state.base.language,
            userInfo: (state) => state.base.userInfo,
        }),
      currentLanguage() {
        return this.language || 'zh_CN'
      },
        //当前页数据
        currentPageData() {
            const start = (this.tablePage.pageNo - 1) * this.tablePage.pageSize;
            const end = start + this.tablePage.pageSize
            return this.list.slice(start, end)
        },
        //计算序号，翻页序号保持递增
        computeSn(index) {
            return (this.tablePage.pageNo - 1) * this.tablePage.pageSize;
        }
    },
    created() {
        this.initData()
    },
    methods: {
        // 初始化数据
        initData() {
            if (this.type !== "add") {
                const params = {
                    optCode: 'STM002GET1811',
                    payload: {
                        rptOrgNo: this.reqOrgNo,
                        rptpd: this.date,
                    },
                    pageInfo: {
                        pageNo: this.tablePage.pageNo,
                        pageSize: this.tablePage.pageSize
                    }
                }
                this.$p2svr(this.$api['_01_TSTM02MONRPT1800'], 'RequestPoAuth', { ...params }).then(res => {
                    // 如果详情没查到数据 新增空数据
                    if (!res.payload || !Array.isArray(res.payload) || res.payload.length === 0) {
                        if (this.type !== 'view') {
                            this.list = [{
                                id: this.globalId, //ltt
                                rptOrgName: this.userInfo.userAhrOrgName,
                                monSys: '',
                                modlRefno: '',
                                modlName: '',
                                monDes: '',
                                oprtFreq: '',
                                rvCycle: '',
                                oprtSts: '',
                                lstmHiDt: '',
                                lstmHiCncln: '',
                                lstmMdfDt: '',
                                lstmMdfTp: '',
                            }]
                            this.tablePage.total = 1
                        }
                    } else {
                        /*this.list = res.payload
                        this.tablePage.total = res.pageInfo ? res.pageInfo.total : 0
                        this.tablePage.pageNo = res.pageInfo ? res.pageInfo.pageNo : 1
                        this.tablePage.pageSize = res.pageInfo ? res.pageInfo.pageSize : 10*/
                        //前端分页，接口返回所有数据
                        this.list = res.payload.map((item, index) => ({ ...item, id: index + 1 }));
                        this.globalId = this.list.length
                        this.tablePage.total = this.list.length
                    }
                })
            } else {
                const params = {
                    optCode: 'STM002GET1811',
                    payload: {
                        rptOrgNo: this.userInfo.userAhrOrg,
                        rptpd: this.date,
                        queryFrom: 'add'
                    },
                    pageInfo: {
                        pageNo: this.tablePage.pageNo,
                        pageSize: this.tablePage.pageSize
                    }
                }
                this.$p2svr(this.$api['_01_TSTM02MONRPT1800'], 'RequestPoAuth', { ...params }).then(res => {
                    // 如果详情没查到数据 新增空数据
                    this.list = res.payload
                    if (!res.payload || !Array.isArray(res.payload) || res.payload.length === 0) {
                        this.list = [{
                            id: this.globalId, //ltt
                            rptOrgName: this.userInfo.userAhrOrgName,
                            monSys: '',
                            modlRefno: '',
                            modlName: '',
                            monDes: '',
                            oprtFreq: '',
                            rvCycle: '',
                            oprtSts: '',
                            lstmHiDt: '',
                            lstmHiCncln: '',
                            lstmMdfDt: '',
                            lstmMdfTp: '',
                        }]
                        this.tablePage.total = 1
                    } else {
                        /*this.list = res.payload
                        this.tablePage.total = res.pageInfo ? res.pageInfo.total : 0
                        this.tablePage.pageNo = res.pageInfo ? res.pageInfo.pageNo : 1
                        this.tablePage.pageSize = res.pageInfo ? res.pageInfo.pageSize : 10*/
                        //前端分页，接口返回所有数据
                        this.list = res.payload.map((item, index) => ({ ...item, id: index + 1 }));
                        this.globalId = this.list.length
                        this.tablePage.total = this.list.length
                    }
                })
            }
            console.log("监测模型台账-初始list")
            console.log(this.list)
            console.log(this.tablePage)

        }, // 分页
        handlePageChange({ currentPage, pageSize }) {
            this.tablePage.pageNo = currentPage
            this.tablePage.pageSize = pageSize
            //前端分页
            console.log("监测模型台账-点击翻页后this.list")
            console.log(this.list)
            //this.initData()
        },
        // 删除
        delList(row) {
            const index = this.currentPageData.findIndex(item => item.id === row.id)
            console.log("监测模型台账-删除index")
            console.log(index)
            //需要删除全局序号row.id对应的数据
            this.list = this.list.filter(item => item.id !== row.id)

            //删除后当前页为空，且不是第一页，跳转到前一页
            if (this.currentPageData.length === 0 && this.tablePage.pageNo > 1) {
                this.tablePage.pageNo--
            }
            this.tablePage.total = this.list.length

            console.log("监测模型台账-delList-row后this.list")
            console.log(row)
            console.log(this.list)
        },
        // 新增
        addList() {
            this.globalId++
            this.list.push({
                id: this.globalId, //ltt
                rptOrgName: this.userInfo.userAhrOrgName,
                monSys: '',
                modlRefno: '',
                modlName: '',
                monDes: '',
                oprtFreq: '',
                rvCycle: '',
                oprtSts: '',
                lstmHiDt: '',
                lstmHiCncln: '',
                lstmMdfDt: '',
                lstmMdfTp: '',
            })
            //如果新增后当前页为空，跳转到最后一页
            if (this.currentPageData.length === 0) {
                this.tablePage.pageNo = Math.ceil(this.list.length / this.tablePage.pageSize)
            }
            this.tablePage.total = this.list.length
        },
    },

}

</script>